<template>
    <div style="width: 2000px">
        <h2>优惠券列表</h2>
        <input type="button" value="增加优惠券" @click="add">
        标题名称:<input type="text" v-model="a.name" />
        时间:<input type="date" v-model="a.date" />
        优惠券类型:<select v-model="a.id">
            <option value="">请选择</option>
            <option :value="1">代金券</option>
            <option :value="2">折扣券</option>
            <option :value="3">兑换券</option>
        </select>
        <input type="button" value="查询" @click="getshow">
        <input type="button" value="批量发布" @click="updatestateall(1)">
        <input type="button" value="批量不发布" @click="updatestateall(0)">
        <table class="table table-bordered" style="width: 2000px">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkall"></td>
                    <td>优惠券类型</td>
                    <td>标题</td>
                    <td>副标题</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>限领数量</td>
                    <td>消费金额</td>
                    <td>减免金额</td>
                    <td>折扣</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>适用业务</td>
                    <td>使用须知</td>
                    <td>门店地址</td>
                    <td>电话</td>
                    <td>状态</td>
                    <td>优惠券颜色</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td><input type="checkbox" v-model="ids" @change="checkone" :value="item.Id"></td>
                    <td><span v-if="item.DiscountT == 1">代金券</span>
                        <span v-if="item.DiscountT == 2">折扣券</span>
                        <span v-if="item.DiscountT == 3">兑换券</span>
                    </td>
                    <td>{{ item.Title }}</td>
                    <td>{{ item.subTitle }}</td>
                    <td><img :src="item.Photo" width="200"></td>
                    <td>{{ item.Count }}</td>
                    <td>{{ item.PersonNumber }}</td>
                    <td>{{ item.AmountMoney }}</td>
                    <td>{{ item.subMoney }}</td>
                    <td>{{ item.ZheKou }}</td>
                    <td>{{ moment(item.BeginTime).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ moment(item.EndTime).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ item.UseService }}</td>
                    <td>{{ item.UseDesc }}</td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ item.State == 1 ? "发布" : "不发布" }}</td>
                    <td><input type="color" v-model="item.Color" disabled></td>
                    <td> <input type="button" value="修改" @click="update(item.Id)">
                        <input type="button" value="删除" @click="Del(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共<b>{{ data.zongHang }}</b>条</span>
        <span>每页<b>{{ a.pageHang }}</b>条</span>
        <span>当前<b>{{ a.pageYe }}/{{ data.zongYe }}</b>页</span>
        <select v-model="a.pageHang" @change="getshow">
            <option :value="item2" v-for="item2 in arr" :key="item2">{{ item2 }}</option>
        </select>
        <input type="button" value="首页" @click="goPage(1)" />
        <input type="button" value="上一页" @click="goPage(a.pageYe - 1)" />
        <span v-for="item in data.zongYe" @click="goPage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="goPage(a.pageYe + 1)" />
        <input type="button" value="尾页" @click="goPage(data.zongYe)" />
        <input type="number" v-model="a.pageYe" />
        <input type="button" value="跳转" @click="goPage(a.pageYe)">
    </div>
</template>



<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
const router = useRouter();
const route = useRoute();

const add = () => {
    router.push("/adddiscount")
}
const update: any = (id: any) => {
    router.push({
        path: '/update',
        query: { id: id }
    })
}

onMounted(() => {
    show();
})
let checked = ref(false);

let ids = ref([]);

let arr = ref([2, 4, 6])

let a: any = reactive({
    pageYe: 1,
    pageHang: 2,
    name: '',
    date: '',
    id: ''
})

let data: any = reactive({
    list: [],
    zongHang: 0,
    zongYe: 0
})

const checkall = () => {
    checked.value = !checked.value;
    if (checked.value === true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = [];
    }
}
const checkone = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

const updatestateall = (state: any) => {
    if (ids.value.length == 0) {
        alert("至少选一个");
        return;
    }
    let f = confirm("确认修改?");
    if (f) {
        axios({
            method: 'put',
            url: '/api/Discount/UpdateStateAll',
            params: {
                ids: ids.value.toString(),
                state: state
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert("修改成功");
                    checked.value = false,
                        ids.value = [],
                        show()
                }
            })
    }
}




const Del: any = (id: any) => {
    let f = confirm("确认删除?");
    if (f) {
        axios({
            url: '/api/Discount/Del',
            params: { id: id },
            method: 'delete'
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert("删除成功");
                    show();
                }
            })
    }
}

const goPage = (num: any) => {
    if (num < 1) {
        a.pageYe == 1;
        return;
    }
    if (num > data.zongYe) {
        a.pageYe == data.zongYe;
        return;
    }
    a.pageYe = num;
    show();
}

const getshow = () => {
    a.pageYe = 1;
    show();

}

const show = () => {
    axios({
        url: '/api/Discount/ShowDiscount',
        method: 'get',
        params: a
    })
        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.zongHang = res.data.zongHang;
            data.zongYe = res.data.zongYe;
        })
}




</script>

<style scoped></style>